<!--登陆-->
<template>
	<view class=" page-content">
		<view class="topBox" :style="{ paddingTop: statusBarHeight }">
			<view class="logoBox">
				<image
					class="imagesBox"
					mode="aspectFit"
					style="width: 120rpx ; height: 120rpx;"
					:src="getStaticFilePath('logo.png')"
				></image>
			</view>
			<view class="text-light font-lg pt-1"></view>
			<view class="text-light font-bg pt-1 font-weight"></view>

			<view class="tabBox ">
				<u-tabs
					gutter="120"
					ref="tabs"
					inactive-color="#fff"
					:list="list"
					:current="current"
					:show-bar="false"
					active-color="#fff"
					@change="changeTabFn"
				></u-tabs>
			</view>
			<view class="formBox u-flex-1">
				<view :class="[current === 0 ? 'before' : 'after']"></view>
				<view class="pt-4  px-6" v-if="current == 0"><account ref="account"></account></view>
				<view class="pt-4 px-6" v-if="current == 1"><phone ref="phone"></phone></view>
				<view class="px-6 text-c text-primary font-sm font-weight" @click="hanglgSignInFn">注册账号</view>
			</view>
		</view>
	</view>
</template>

<script>
import account from './components/account.vue';
import phone from './components/phone.vue';
export default {
	components: {
		account,
		phone
	},
	data() {
		return {
			statusBarHeight: '',
			navBarHeight: '',
			list: [
				{
					name: '密码登录'
				},
				{
					name: '短信登录'
				}
			],
			current: 0
		};
	},

	onLoad() {
		/*#ifdef MP*/
		let that = this;
		uni.getSystemInfo({
			success: function(info) {
				// 屏幕高度
				let screenHeight = info.screenHeight;
				// 屏幕宽度
				let screenWidth = info.screenWidth;
				// 胶囊高度
				//状态栏高度
				that.statusBarHeight = info.statusBarHeight * 2 + 'rpx';
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				let navBarHeight = menuButtonInfo.bottom + menuButtonInfo.top - screenHeight;
				that.navBarHeight = navBarHeight + screenHeight - info.statusBarHeight + 'rpx';
			}
		});
		/*#endif*/
	},
	methods: {
		//切换登录方式
		changeTabFn(index) {
			this.current = index;
		},
		//注册账号
		hanglgSignInFn() {
			this.$Router.push({
				path: '/userPages/pages/register/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 背景图设置 */
.page-content {
	.topBox {
		// height: 285px;
		height: 100vh;
		text-align: center;
		background-image: url($custom-bg-img-url+'headBg.png');
		background-repeat: no-repeat;
		background-size: 100% 40%;
		display: flex;
		flex-direction: column;
		.logoBox {
			/*#ifdef H5*/
			padding-top: 120rpx;
			/*#endif*/
			/*#ifdef MP*/
			padding-top: 80rpx;
			/*#endif*/
		}
	}
	.formBox {
		position: relative;
		background-color: #fff;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
	}
	.before {
		content: '';
		position: absolute;
		left: 168rpx;
		top: -40rpx;
		border-width: 10px;
		border-style: solid;
		border-color: transparent transparent #fff transparent;
	}
	.after {
		content: '';
		position: absolute;
		right: 168rpx;
		top: -40rpx;
		border-width: 10px;
		border-style: solid;
		border-color: transparent transparent #fff transparent;
	}
	::v-deep .u-checkbox__label {
		font-size: 24rpx !important;
		color: #86909c !important;
	}
	::v-deep .u-tabs {
		background: rgba(255, 255, 255, 0) !important;
	}
}
</style>
